<template>
  <div class="components-container">
    <split-pane split="vertical" :min-percent="50" :default-percent="60" @resize="resize">
      <template slot="paneL">
        <div class="left-container">
          <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
            <el-form-item :label="$t('task.name')" prop="title">
              <el-input v-model="form.title"/>
            </el-form-item>
            <el-form-item :label="$t('task.receiver')" prop="file_name">
              <el-upload
                  ref="upload"
                  class="upload-demo"
                  drag
                  action=""
                  accept=".txt"
                  :on-remove="handleRemove"
                  :before-upload="beforeUpload"
                  :http-request="handleHttpRequest"
                  :limit="1"
                  :file-list="fileList"
                  :on-change="handleChange"
              ><i class="el-icon-upload"/>
                <div class="el-upload__text">
                  {{ $t('message.uploadMsg') }}
                </div>
              </el-upload>
              <el-input v-model="form.file_name" style="display: none"/>
              <el-input v-model="form.file_id" style="display: none"/>
              <el-progress v-show="showProcess" :percentage="processLength" :stroke-width="2"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="onSubmit">{{ $t('route.create') }}</el-button>
              <el-button @click="onCancel">{{ $t('permission.cancel') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import {upload} from '@/api/upload'
import {create} from '@/api/dnd'
import splitPane from 'vue-splitpane'

export default {
  inject: ['reload'],
  components: {splitPane},
  data() {
    return {
      form: {
        title: '',
        file_name: '',
        file_id: 0
      },
      formRules: {
        title: [{required: true, message: this.$t('message.required')}],
        file_name: [{required: true, message: this.$t('message.required')}]
      },
      fileList: [],
      countryCodeList: [],
      processLength: 0,
      showProcess: false,
      loading: false,
      oneBtn: false,
      twoBtn: false
    }
  },
  created() {

  },
  methods: {
    resize() {
      console.log('resize')
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        this.loading = true
        create({
          title: this.form.title,
          file_name: this.form.file_name,
          file_id: this.form.file_id
        }).then(res => {
          this.$confirm('Create successful！', 'title', {
            confirmButtonText: 'confirm',
            showCancelButton: false,
            type: 'success'
          }).then(() => {
            this.reload()
          })
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      })
    },
    onCancel() {
      this.form.file_name = ''
      this.form.title = ''
      this.form.file_id = 0
      this.$refs.upload.clearFiles()
    },
    onShowTemplate() {
      this.flag = false
    },
    handleRemove() {
      this.form.file_name = ''
      this.fileList = []
    },
    handleChange(file, fileList) {
      if (file.status === 'ready') {
        this.processLength = 0
        this.showProcess = true
        const interval = setInterval(() => {
          if (this.processLength >= 99) {
            clearInterval(interval)
            return
          }
          this.processLength += 1
        }, 20)
      }

      if (file.status === 'success') {
        this.processLength = 0
        this.showProcess = false
      }
    },
    // 上传前处理
    beforeUpload(file) {
      this.fileList = []
      const fileSize = file.size
      const FIVE_M = 30 * 1024 * 1024
      if (fileSize > FIVE_M) {
        this.$message.error(this.$t('message.max'))
        return false
      }
      const fileName = file.name
      const reg = /^.+(\.txt)$/
      if (!reg.test(fileName)) {
        this.$message.error(this.$t('message.type'))
        return false
      }
      return true
    },
    handleHttpRequest(item) {
      const formData = new FormData()
      formData.append('file', item.file)
      formData.append('path', 10)
      upload(formData).then(res => {
        if (res.data.errorCount > 0) {
          this.$refs.upload.clearFiles()
          this.$message.error(this.$t('message.errorCount'))
          return
        }
        this.form.file_name = res.data.fileName
        this.form.file_id = res.data.fileId
        this.fileList.push({
          name: res.data.fileName,
          file: item.file
        })
        this.processLength = 100
        this.showProcess = false
        this.$message.success(this.$t('message.uploadSuccess'))
      }).catch(err => {
        this.$refs.upload.clearFiles()
        this.$message.error(err)
      })
    }
  }
}
</script>

<style scoped>
.phone-content-txt >>> .el-input__inner {
  border: 0;
}

/* 如果你的 el-input type 设置成textarea ，就要用这个了 */
.phone-content-txt >>> .el-textarea__inner {
  border: 0;
  resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}

.phone {
  width: 320px;
  height: 600px;
  border: 1px solid #DCDFE6;
  border-radius: 20px;
  margin-left: 100px;
  background-color: #ffffff;
}

.phone-header {
  background-color: #00795f;
  width: 100%;
  height: 52px;
  margin-top: 30px;
}

.phone-content {
  background-color: rgb(239, 234, 226);
  width: 100%;
  min-height: 480px;
  position: relative;
}

.phone-content-txt {
  position: absolute;
  z-index: 100;
  padding: 0.5rem;
  width: 90%;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  word-wrap: break-word;
}

.components-container {
  position: relative;
  top: 20px;
}

.left-container {
  height: 100%;
}
</style>

